<template>
  <div class="main-container">
    <PageFragmentDownList v-if="isFragement()"></PageFragmentDownList>
    <a-tabs v-else
            class="a-tabs">
      <a-tab-pane v-for="tabKey in Object.keys(tabs)"
                  :key="tabKey"
                  :tab="tabs[tabKey].title">
        <component :is="tabs[tabKey].componentId">
        </component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
  import PageAllDownList from './pages/down-list-all/index';
  import PageCancelDownList from './pages/down-list-cancel';
  import PageMyDownList from './pages/down-list-my';
  import PageOthersDownList from './pages/down-list-others';
  import PageOthersCompeteDownList from './pages/down-list-others-compete';
  import PageFragmentDownList from './pages/down-list-fragment/index';
  import { getUrlSearchParams } from '@/utils';
  export default {
    components: {
      PageAllDownList,
      PageCancelDownList,
      PageMyDownList,
      PageOthersDownList,
      PageOthersCompeteDownList,
      PageFragmentDownList
    },
    data() {
      return {
        tabs: {
          all: {
            title: this.$i18n('collaboration.alldownlist.lable'),
            componentId: 'PageAllDownList'
          },
          cancel: {
            title: this.$i18n('collaboration.workflow.label.repealStepback'),
            componentId: 'PageCancelDownList'
          },
          my: {
            title: this.$i18n('handover.button.to.js'),
            componentId: 'PageMyDownList'
          },
          others: {
            title: this.$i18n('handover.button.from.js'),
            componentId: 'PageOthersDownList'
          },
          othersCompete: {
            title: this.$i18n('collaboration.other.grab'),
            componentId: 'PageOthersCompeteDownList'
          }
        }
      };
    },
    methods: {
      isFragement() {
        // 是否为栏目跳转
        return getUrlSearchParams('fragmentId');
      }
    }
  };
</script>
<style>
  @import url('../../assets/css/common.css');
</style>
<style lang="scss" scoped>
  .main-container {
    padding-left: 16px;
    background-color: #ffffff;
  }

  .a-tabs {
    &::v-deep .ant-tabs-bar {
      margin-bottom: 0px;
    }

    &::v-deep .ant-tabs-nav .ant-tabs-tab {
      padding: 10px 16px;
    }
  }
</style>
